<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="show"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input
                v-model="editForm.nickName"
                placeholder="请输入用户昵称"
                maxlength="30"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属机构" prop="institutionId">
              <el-select
                v-model="editForm.institutionId"
                placeholder="请选择所属机构"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in institutionList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="editForm.userId == null" :span="12">
            <el-form-item label="用户账号" prop="userName">
              <el-input
                v-model="editForm.userName"
                placeholder="请输入用户账号"
                maxlength="30"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col v-if="editForm.userId == null" :span="12">
            <el-form-item label="用户密码" prop="password">
              <el-input
                v-model="editForm.password"
                placeholder="请输入用户密码"
                type="password"
                maxlength="20"
                show-password
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input
                v-model="editForm.phonenumber"
                placeholder="请输入手机号码"
                maxlength="11"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="editForm.email"
                placeholder="请输入邮箱"
                maxlength="50"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户性别" prop="sex">
              <el-select
                v-model="editForm.sex"
                placeholder="请选择性别"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="dict in sexList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="editForm.status">
                <el-radio
                  v-for="dict in statusList"
                  :key="dict.value"
                  :label="dict.value"
                >
                  {{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="editForm.remark"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listInstitution } from "@/api/mc/institution";
export default {
  name: "UserForm",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object,
      default: () => {},
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
    sexList: {
      type: Array,
      default: () => [],
    },
    statusList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.reset();
        this.editForm = Object.assign(this.editForm, this.form);
        this.getInstitutionList();
      } else {
        this.reset();
      }
    },
  },
  data() {
    return {
      editForm: {
        userId: null,
        userName: null,
        nickName: null,
        password: null,
        phonenumber: null,
        institutionId: null,
        email: null,
        sex: null,
        status: "0",
        remark: null,
      },
      institutionList: [], // 机构列表
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户账号不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户账号长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户密码长度必须介于 5 和 20 之间",
            trigger: "blur",
          },
        ],
        email: [
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
        ],
        sex: [{ required: true, message: "用户性别不能为空", trigger: "blur" }],
        institutionId: [{ required: true, message: "所属机构不能为空", trigger: "blur" }],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 获取机构列表
    getInstitutionList() {
      listInstitution({ pageNum: 1, pageSize: 1000 }).then((res) => {
        this.institutionList = res.rows;
      });
    },
    // 取消按钮
    cancel() {
      this.show = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.editForm = {
        userId: null,
        userName: null,
        nickName: null,
        password: null,
        phonenumber: null,
        institutionId: null,
        email: null,
        sex: null,
        status: "0",
        remark: null,
      };
      this.resetForm("editForm");
    },
    // 提交表单
    submitForm() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          this.$emit("submit", this.editForm);
        }
      });
    },
  },
};
</script>
